<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>稀土掘金</title>
    <link rel="stylesheet" href="./图标库/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: rgb(81, 87, 103);
        }

        body {
            background-color: #fff;
        }

/* 最大底部盒子宽度设定（除导航栏外） */
        .maxbox {
            position: relative;
            margin: 0 auto;
            max-width: 1700px;
            height: 4000px;
            background-color: rgb(242, 243, 245);

        }

/* 头部导航栏模块 */
    /* 导航栏板块 */
        .g-header {
            position: fixed;
            z-index: 99;
            display: flex;
            margin: 0 auto;
            width: 100%;
            height: auto;
            background-color: #fff;
            white-space: nowrap;

        }

    /* logo */
        .logo {
            flex: 3;
            text-align: center;
            border: 1px solid rgb(255, 255, 255);
            background-color: #fff;
        }

        /* logo图片大小设定 */
        .logo img {
            width: 90%;
            height: 50px;
        }

        .g-header-son-1 {
            flex: 2;
            text-align: center;
            border: 1px solid rgb(255, 255, 255);
            background-color: #fff;
        }

        .g-header-son-2 {
            flex: 3;
            text-align: center;
            border: 1px solid rgb(255, 255, 255);
            background-color: #fff;
        }

        /* 导航栏文字样式 */
        .g-header-son-1 a,
        .g-header-son-2 a {
            font-size: 14px;
            line-height: 55px;
            text-align: center;
        }

        /* 首页默认字体颜色 */
        .g-header-son-1:nth-child(3) a {
            color: rgb(30, 128, 255);
        }

        /* 导航栏鼠标悬停效果 */
        .g-header-son-1 a:hover,
        .g-header-son-2 a:hover {
            color: #000;
            border-bottom: 2px solid rgb(30, 128, 255);
        }

    /* 搜索框 */
        .g-header-son-3 {
            position: relative;
            flex: 13;
            text-align: center;
            line-height: 55px;
            border: 1px solid #fff;
            background-color: #fff;
        }

        /* 搜索框样式 */
        .g-header-son-3 input {
            position: absolute;
            top: 25%;
            left: 2%;
            padding-left: 2px;
            width: 95%;
            height: 50%;
            border: 1px solid #b1b0b0;
            border-radius: 4px;
        }

        /* 鼠标悬停 */
        .g-header-son-3 input:hover {
            border: 1px solid #626262;
        }

        /* 搜索图标 */
        .icon-sousuo-father {
            position: absolute;
            top: 25%;
            left: 87%;
            width: 11%;
            height: 50%;
            line-height: 28px;
            border-radius: 0 4px 4px 0;
            background-color: #e1e1e174;
        }

        .icon-sousuo {
            font-size: 16px;
            color: #898989;
        }

    /* 创作者中心 */
        .g-header-son-4 {
            flex: 3;
            text-align: center;
            border: 1px solid rgb(255, 255, 255);
            background-color: #fff;
        }

        /* 创作者中心左部样式 */
        .g-header-son-4 button {
            margin-top: 10px;
            margin-left: 10%;
            width: 90%;
            height: 70%;
            color: #fff;
            font-size: 13px;
            line-height: 38px;
            text-align: center;
            border: none;
            border-radius: 4px 0 0 4px;
            background-color: rgb(30, 128, 255);
            white-space: nowrap;
        }

        /* 鼠标悬停 */
        .g-header-son-4 button:hover {
            background-color: rgb(17, 113, 238);
            cursor: pointer;
        }

        /* 创作者中心右部样式 */
        .g-header-son-5 {
            flex: 1;
            background-color: #fff;
        }

        .g-header-son-5>div {
            position: relative;
            margin-top: 11px;
            width: 54%;
            height: 68%;
            border-radius: 0 4px 4px 0;
            border-left: 1px solid rgb(155, 216, 236);
            background-color: rgb(30, 128, 255);
        }

        /* 下拉列表 */
        .g-header-son-5-list {
            position: absolute;
            z-index: 99;
            display: none;
            top: 100%;
            left: -383px;
            width: 400px;
            height: 260px;
            border-radius: 4px;
            border: 1px solid #b1b0b072;
            background-color: #fff;
        }

        /* 鼠标悬停 */
        .g-header-son-5>div:hover {
            background-color: rgb(17, 113, 238);
            cursor: pointer;
        }

        .g-header-son-5>div:hover>.g-header-son-5-list {
            display: block;
        }

        /* 下拉列表内容 */
        /* 上部分 */
        .g-header-son-5-list-top {
            width: 100%;
            height: 40%;
            border-bottom: 1px solid #b1b0b098;
        }

        .g-header-son-5-list-top>div {
            float: left;
            margin-top: 6%;
            margin-left: 4%;
            padding-top: 10px;
            width: 15%;
            height: 60%;
            color: rgb(81, 87, 103);
            font-size: 16px;
            line-height: 28px;
            text-align: center;
            border-radius: 4px;
        }

        .g-header-son-5-list-top .iconfont {
            font-size: 32px;
            text-align: center;
        }

        .g-header-son-5-list-top .icon-bianjiwenzhang_huaban {
            color: rgb(55, 131, 248);
        }

        .g-header-son-5-list-top .icon-ef-redian-gongju {
            color: rgb(79, 215, 188);
        }

        .g-header-son-5-list-top .icon-AIxiebiji {
            color: rgb(56, 127, 255);
        }

        .g-header-son-5-list-top .icon-a-11xiedaima {
            color: rgb(128, 93, 255);
        }

        .g-header-son-5-list-top .icon-caogaoxiang {
            color: rgb(8, 152, 242);
        }

        /* 鼠标悬停 */
        .g-header-son-5-list-top>div:hover {
            background-color: rgba(229, 231, 231, 0.427);
        }

        /* 下部分 */
        .g-header-son-5-list-bottom {
            width: 100%;
            height: 60%;
            overflow: hidden;
            clear: both;
        }

        /* 空白盒子以支撑浮动盒子的底部 */
        .g-header-son-5-list-bottom div:nth-child(3) {
            height: 26%;
        }

        .g-header-son-5-list-bottom div:nth-child(1) {
            float: left;
            margin-top: 2%;
            font-size: 20px;
        }

        .g-header-son-5-list-bottom div:nth-child(2) {
            float: right;
            margin-top: 2%;
            margin-right: 4%;
        }

        .g-header-son-5-list-bottom>div {
            margin-left: 5%;
            margin-bottom: 2%;
        }

        /* 标签 */
        .g-header-son-5-list-bottom>div>a>span {
            margin-right: 2%;
            color: rgb(30, 128, 255);
            font-size: 12px;
            background-color: rgba(17, 113, 238, 0.118);
        }

        /* 鼠标悬停 */
        .g-header-son-5-list-bottom>div>a:hover {
            color: #898989;
        }


    /* 会员 */
        .g-header-son-6 {
            flex: 2;
            margin-right: 1%;
            font-size: 14px;
            text-align: center;
            line-height: 55px;
            border: 1px solid rgb(255, 255, 255);
            background-color: #fff;
        }

        .icon-huiyuan {
            color: #e8a514;
        }

    /* 登录注册 */
        .g-header-son-7 {
            flex: 4;
            border: 1px solid rgb(255, 255, 255);
            background-color: #fff;
        }

        /* 按钮样式 */
        .g-header-son-7 button {
            margin-top: 8px;
            padding: 2px 10px;
            height: 70%;
            color: rgb(30, 128, 255);
            font-size: 14px;
            text-align: center;
            line-height: 26px;
            white-space: nowrap;
            border: 1px solid rgb(30, 128, 255);
            border-radius: 4px;
            background-color: rgb(244, 249, 255);
        }

        /* 鼠标悬停 */
        .g-header-son-7 button:hover {
            background-color: rgb(211, 226, 244);
            cursor: pointer;
        }

/* 左侧边栏模块 */
        .g-nav {
            position: fixed;
            display: flex;
            flex-direction: column;
            top: 74px;
            left: 11%;
            width: 12%;
            height: auto;
            border-radius: 4px;
            background-color: rgb(255, 255, 255);
            white-space: nowrap;
            overflow: hidden;
        }

        .g-nav>div {
            flex: 1;
            margin: 0 5%;
            padding: 3px 0;
            color: #626262;
            font-size: 17px;
            line-height: 40px;
            border: 1px solid rgb(255, 255, 255);
            border-radius: 4px;
        }

        /* 鼠标悬停 */
        .g-nav>div:hover {
            cursor: pointer;
            background-color: rgb(247, 248, 250);
        }

        .g-nav>div>span {
            margin: 0 10%;
        }

        .g-nav>div:last-child span {
            margin: 0 5%;
            color: #e8a514;
        }

        /* 鼠标悬停 */
        .g-nav>div:hover {
            color: rgb(30, 128, 255);
        }


/* 内容模块 */
    /* 父容器 */
        .g-content {
            position: absolute;
            z-index: 2;
            top: 74px;
            left: 24%;
            width: 52%;
            height: 1000px;
            /*auto;*/
            border-radius: 4px;
            background-color: rgb(255, 255, 255);
        }

    /* 内容列表头部 */
        .g-content-header {
            display: flex;
            width: 100%;
            height: 50px;
            border-radius: 4px 4px 0 0;
            border-bottom: 1px solid rgb(228, 230, 235);
            background-color: rgb(255, 255, 255);
        }

        .g-content-header div:nth-child(1),
        .g-content-header div:nth-child(2) {
            flex: 1;
            color: rgb(144, 144, 144);
            font-size: 16px;
            line-height: 44px;
            text-align: center;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .g-content-header div:last-child {
            flex: 10;
        }

        /* 鼠标悬停 */
        .g-content-header div a:nth-child(1):hover,
        .g-content-header div a:nth-child(2):hover {
            color: rgb(30, 128, 255);
        }

    /* 文章列表 */
        .g-content-list li {
            position: relative;
            padding-left: 12px;
            width: 100%;
            height: 90px;
            border-bottom: 1px solid rgba(144, 144, 144, 0.311);
            box-sizing: border-box;
        }

        /* 鼠标悬停 */
        .g-content-list li:hover {
            background-color: rgb(247, 248, 250);
            cursor: pointer;
        }

        /* 标题 */
        .g-content-list li>div>div:first-child {
            width: 80%;
            height: auto;
            color: #000;
            font-size: 17px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 文本 */
        .g-content-list li>div>div:nth-child(2) {
            margin-top: 4px;
            width: 80%;
            height: auto;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 图片 */
        .g-content-list li>div>img {
            position: absolute;
            top: 9px;
            right: 16px;
            width: 100px;
            height: 70px;
            border-radius: 4px;
        }

        /* 底部 */
        .g-content-list-footer {
            position: relative;
            display: flex;
            margin-top: 10px;
            width: 80%;
            height: 16px;
            border: 1px solid #fff;
        }


        /* 姓名 */
        .g-content-list-footer>div:nth-child(1) {
            padding-right: 12px;
            width: auto;
            font-size: 12px;
            border-right: 1px solid rgb(144, 144, 144);
            white-space: nowrap;
        }

        /* 浏览量、点赞量 */
        .g-content-list-footer>div:nth-child(2),
        .g-content-list-footer>div:nth-child(3) {
            padding: 0 14px;
            width: auto;
            color: rgb(81, 87, 103);
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
        }

        /* 不感兴趣栏目 */
        .g-content-list-footer-spot {
            padding-right: 15px;
            width: auto;
            color: rgb(81, 87, 103);
            font-size: 12px;
            text-align: center;
        }

        /* 鼠标悬停 */
        .g-content-list-footer>div:nth-child(3) a:hover,
        .g-content-list-footer-spot:hover {
            color: rgb(30, 128, 255);
            cursor: pointer;
        }

        /* 空盒子 */
        .g-content-list-footer-blank {
            width: 40%;
        }

        /* 标签 */
        .g-content-list-footer-label {
            position: absolute;
            right: 0;
            background-color: #fff;
        }

        .g-content-list-footer-label span {
            margin: 0 2px;
            padding: 0 4px;
            color: rgb(81, 87, 103);
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            background-color: #89898931;
        }

/* 右侧边栏模块 */
        .g-nav-right {
            display: flex;
            flex-direction: column;
            position: absolute;
            z-index: 2;
            top: 74px;
            right: 7%;
            width: 16%;
            height: 1800px;
            border-radius: 4px;
            /* background-color: rgba(101, 101, 101, 0.655); */
        }

    /* 签到 */
        .g-nav-right-sign {
            flex: 1;
            margin-bottom: 10px;
            padding-bottom: 4px;
            border-radius: 4px;
            border: 1px solid #fff;
            background-color: #fff;
        }

        .g-nav-right-sign h3 {
            margin: 18px 0 4px 10px;
            font-size: 18px;
        }

        .g-nav-right-sign span {
            margin: 0 10px;
            color: rgb(81, 87, 103);
            font-size: 13px;
        }

        .g-nav-right-sign button {
            width: 64px;
            height: 34px;
            color: rgb(30, 128, 255);
            border-radius: 4px;
            border: 1px solid rgb(147, 194, 255);
            background-color: rgb(244, 249, 255);
        }

        /* 按钮鼠标悬停 */
        .g-nav-right-sign button:hover {
            background-color: rgb(232, 242, 255);
        }

    /* 文章榜 */
        .g-nav-right-text {
            flex: 3;
            margin-bottom: 10px;
            border-radius: 4px;
            /* border: 1px solid #626262; */
            background-color: #fff;
        }

        /* 头部 */
        .g-nav-right-text-header {
            display: flex;
            width: 100%;
            height: 16%;
            border-bottom: 2px solid #62626230;
        }

        /* 标题 */
        .g-nav-right-text-header div:nth-child(1) {
            flex: 1;
            font-size: 17px;
            text-align: center;
            line-height: 40px;
            white-space: nowrap;
            overflow: hidden;
        }

        .icon-wenzhang {
            padding-right: 4px;
            color: rgb(255, 148, 111);
        }

        /* 空盒子 */
        .g-nav-right-text-header div:nth-child(2) {
            flex: 1;
        }

        /* 换一换 */
        .g-nav-right-text-header div:nth-child(3) {
            flex: 1;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
        }

        .g-nav-right-text-header div:nth-child(3)>a {
            font-size: 14px;
            line-height: 40px;
            color: rgb(144, 144, 144);
        }

        /* 鼠标悬停 */
        .g-nav-right-text-header div:nth-child(3)>a:hover {
            color: rgb(30, 128, 255);
        }


        /* 内容列表 */
        .g-nav-right-text-list {
            width: 100%;
            height: 68%;
            border-bottom: 2px solid #62626230;
        }

        .g-nav-right-text-list li>a>div {
            width: 100%;
            height: 37px;
            line-height: 35px;
            /* border: 1px solid #626262; */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 序号 */
        .g-nav-right-text-list-number {
            padding: 0 6px;
            font-size: 14px;
            font-weight: 600;
            font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }

        /* 内容 */
        .g-nav-right-text-list-content {
            font-size: 14px;
        }

        /* 鼠标悬停 */
        .g-nav-right-text-list li:hover {
            background-color: rgb(247, 248, 250);
        }

        /* 底部 */
        .g-nav-right-text-footer {
            width: 100%;
            height: 16%;
            text-align: center;
            /* border: 1px solid #626262; */
        }

        .g-nav-right-text-footer>a {
            color: rgb(144, 144, 144);
            font-size: 18px;
            line-height: 40px;
        }

        /* 鼠标悬停 */
        .g-nav-right-text-footer>a:hover {
            color: rgb(127, 126, 126);

        }


    /* 轮播图 */
        .g-nav-right-slide {
            flex: 2;
            border: 1px solid #626262;
        }

    /* 作者榜 */
        .g-nav-right-author {
            flex: 4;
            border: 1px solid #626262;
        }

    /* 推荐话题 */
        .g-nav-right-topic {
            flex: 5;
            border: 1px solid #626262;
        }

    /* 底部 */
        .g-nav-right-footer {
            flex: 4;
            border: 1px solid #626262;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="g-header">
        <!-- 空白盒子，用于布局 -->
        <div class="g-header-son-1"></div>

        <div class="logo"><a href="#"><img src="./图片素材/logo.png" alt=""></a></div>
        <div class="g-header-son-1"><a href="#">首页</a></div>
        <div class="g-header-son-2"><a href="#">AI Coding</a></div>
        <div class="g-header-son-1"><a href="#">沸点</a></div>
        <div class="g-header-son-1"><a href="#">课程</a></div>
        <div class="g-header-son-1"><a href="#">直播</a></div>
        <div class="g-header-son-1"><a href="#">活动</a></div>
        <div class="g-header-son-1"><a href="#">AI刷题</a></div>
        <div class="g-header-son-1"><a href="#">APP</a></div>
        <div class="g-header-son-1"><a href="#">插件</a></div>
        <!-- 空白盒子，用于布局 -->
        <div class="g-header-son-2"></div>

        <div class="g-header-son-3"><input type="text" placeholder="搜索稀土掘金">
            <div class="icon-sousuo-father"><span class="iconfont icon-sousuo"></span></div>
        </div>
        <div class="g-header-son-4"><button>创作者中心</button></div>
        <div class="g-header-son-5">
            <div>
                <div class="g-header-son-5-list">
                    <div class="g-header-son-5-list-top">
                        <div>
                            <div class="iconfont icon-bianjiwenzhang_huaban"></div>写文章
                        </div>
                        <div>
                            <div class="iconfont icon-ef-redian-gongju"></div>发沸点
                        </div>
                        <div>
                            <div class="iconfont icon-AIxiebiji"></div>写笔记
                        </div>
                        <div>
                            <div class="iconfont icon-a-11xiedaima"></div>写代码
                        </div>
                        <div>
                            <div class="iconfont icon-caogaoxiang"></div>草稿箱
                        </div>
                    </div>
                    <div class="g-header-son-5-list-bottom">
                        <div>创作灵感</div>
                        <div><a href="#">查看更多 ></a></div>
                        <div class="g-header-son-5-list-bottom-blank"></div>
                        <div><a href="#"><span>话题</span>#Trae又又又更新了#</a></div>
                        <div><a href="#"><span>话题</span>#MCP怎么玩#</a></div>
                        <div><a href="#"><span>话题</span>#每天一个知识点#</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="g-header-son-6"><a href="#"><span class="iconfont icon-huiyuan"></span>会员</a></div>
        <div class="g-header-son-7"><button>登录|注册</button></div>
    </div>

    <script>
        //滚动后导航栏隐藏
        const head = document.querySelector('.g-header');
        if (head) {
            window.addEventListener('scroll', function () {
                const scrollTop = document.documentElement.scrollTop;
                if (scrollTop >= 500) {
                    head.style.top = '-10%';
                    head.style.transition = '0.5s';
                } else {
                    head.style.top = '0';
                    head.style.transition = '0.5s';
                }
            });
        }
    </script>
    <!-- <script src="./headerScroll.js" type="module"></script> -->

    <!-- 整体布局最大父容器 -->
    <div class="maxbox">
        <div class="g-nav">
            <div><span class="iconfont icon-guanzhuliebiao"></span>关注</div>
            <div><span class="iconfont icon-zonghe"></span>综合</div>
            <div><span class="iconfont icon-houduan"></span>后端</div>
            <div><span class="iconfont icon-qianduan"></span>前端</div>
            <div><span class="iconfont icon-anzhuo"></span>Android</div>
            <div><span class="iconfont icon-iOS"></span>iOS</div>
            <div><span class="iconfont icon-rengongzhineng"></span>人工智能</div>
            <div><span class="iconfont icon-kaifagongju"></span>开发工具</div>
            <div><span class="iconfont icon-bg-code"></span>代码人生</div>
            <div><span class="iconfont icon-yuedu"></span>阅读</div>
            <div><span class="iconfont icon-paihangbang"></span>排行榜</div>
        </div>
        <script>
            //滚动时导航栏隐藏后左菜单上移
            const nav = document.querySelector('.g-nav')
            window.addEventListener('scroll', function () {
                const n = document.documentElement.scrollTop
                if (n >= 500) {
                    nav.style.top = '3%'
                }
                else {
                    nav.style.top = '10%'
                }
            })
        </script>

        <div class="g-content">
            <div class="g-content-header">
                <div><a href="javascript:;">推荐</a></div>
                <div><a href="javascript:;">最新</a></div>
                <div></div>
            </div>
            <div class="g-content-list">
                <ul>
                    <!-- <li>
                        <div>
                            <div>XiaoMaYi-EleVue：Star1.7k 一款强大的Vue框架解决方案，
                            前后端分离后台管理系统，基于SpringBoot3、Vue3、TypeScrip
                            </div>
                            <div>小蚂蚁云/XiaoMaYi-EleVue是一个开源的前端开发框架，基于Vue.
                                js和Element UI搭建。它整合了丰富的组件和功能，为开发者提供了
                                一套开箱即用的解决方案。通过使用XiaoMaYi-EleVue，开发者可以轻松构建企业级的中后台产品。
                            </div>
                            <div class="g-content-list-footer"> -->
                        <!-- 名字 -->
                    <!-- <div><a href="javascript:;">小华同学ai</a></div> -->
                        <!-- 浏览量 -->
                    <!-- <div><a href="javascript:;"><span class="iconfont icon-icon-"></span><span>6206</span></a></div> -->
                        <!-- 点赞量 -->
                    <!-- <div><a href="javascript:;"><span class="iconfont icon-dianzan"></span><span>点赞</span></a></div> -->
                        <!-- 不感兴趣 -->
                    <!-- <div class="g-content-list-footer-spot"><span>...</span></div>
                                <div class="g-content-list-footer-blank"></div> -->
                        <!-- 标签 -->
                    <!-- <div class="g-content-list-footer-label"><span>前端</span><span>Vue.js</span></div> -->
                    <!-- </div>
                        </div>
                        <div><img src="./图片素材/list-1.webp" alt=""></div>
                        
                    </li> -->


                </ul>
            </div>
        </div>
        <script>
            // 在数组中写入数据
            const contentListData = [
                {
                    title: 'XiaoMaYi-EleVue：Star1.7k 一款强大的Vue框架解决方案，前后端分离后台管理系统，基于SpringBoot3、Vue3、TypeScrip',
                    content: '小蚂蚁云/XiaoMaYi-EleVue是一个开源的前端开发框架，基于Vue.js和Element UI搭建。它整合了丰富的组件和功能，为开发者提供了一套开箱即用的解决方案。通过使用XiaoMaYi-EleVue，开发者可以轻松构建企业级的中后台产品。',
                    footerName: '小华同学ai',
                    footerLook: '6206',
                    footerLike: '点赞',
                    footerStyle: ['前端', 'Vue.js']
                },
                {
                    title: 'XiaoMaYi-EleVue：Star1.7k 一款强大的Vue框架解决方案，前后端分离后台管理系统，基于SpringBoot3、Vue3、TypeScrip',
                    content: '小蚂蚁云/XiaoMaYi-EleVue是一个开源的前端开发框架，基于Vue.js和Element UI搭建。它整合了丰富的组件和功能，为开发者提供了一套开箱即用的解决方案。通过使用XiaoMaYi-EleVue，开发者可以轻松构建企业级的中后台产品。',
                    footerName: '小华同学ai',
                    footerLook: '6206',
                    footerLike: '点赞',
                    footerStyle: ['前端', 'Vue.js']
                },
                
            ]
            //封装成函数
            function setupcontentlist() {
                const ul = document.querySelector('.g-content-list ul')
                //1. 根据数据的个数，创建对应的li
                for (let i = 0; i < contentListData.length; i++) {
                    //2.创建新的li
                    const li = document.createElement('li')
                    //把内容给li
                    li.innerHTML = `
                    <div>
                        <div>${contentListData[i].title}</div>
                        <div>${contentListData[i].content}</div>
                        <div class="g-content-list-footer">
                            <!-- 名字 -->
                            <div><a href="javascript:;">${contentListData[i].footerName}</a></div>
                            <!-- 浏览量 -->
                            <div><a href="javascript:;"><span class="iconfont icon-icon-"></span><span>${contentListData[i].footerLook}</span></a></div>
                            <!-- 点赞量 -->
                            <div><a href="javascript:;"><span class="iconfont icon-dianzan"></span><span>${contentListData[i].footerLike}</span></a></div>
                            <!-- 不感兴趣 -->
                            <div class="g-content-list-footer-spot"><span>...</span></div>
                            <div class="g-content-list-footer-blank"></div>
                            <!-- 标签 -->
                            <div class="g-content-list-footer-label"><span>${contentListData[i].footerStyle[0]}</span><span>${contentListData[i].footerStyle[1]}</span></div>
                            </div>
                            </div>
                            <div><img src="./图片素材/list-1.webp" alt=""></div>
                            `
                            //3. ul追加li
                            ul.appendChild(li)
                        }
                    }
                //调用函数
                setupcontentlist()
        </script>

        <div class="g-nav-right">
            <!-- 签到 -->
            <div class="g-nav-right-sign">
                <h3>下午好！</h3>
                <span>点亮在社区的每一天</span>
                <button>去签到</button>
            </div>
            <!-- 文章榜 -->
            <div class="g-nav-right-text">
                <div class="g-nav-right-text-header">
                    <div>
                        <span class="iconfont icon-wenzhang"></span><span>文章榜</span>
                    </div>
                    <div></div>
                    <div><a href="javascript:;"><span class="iconfont icon-huanyihuan"></span>换一换</a></div>
                </div>
                <div class="g-nav-right-text-list">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <div>
                                    <span class="g-nav-right-text-list-number">1</span><span class="g-nav-right-text-list-content">因网速太慢我把20M+的字体压缩到了几KB</span>
                                </div>
                            </a>
                        </li>    
                    </ul>
                </div>
                <script>
                    //在数组中写入数据
                    const navRightTextData = [
                        { content:'因网速太慢我把20M+的字体压缩到了几KB',},
                        { content:'B站首页的 Banner 这么好看，我让你直接用到你的项目！',},
                        { content:'新来的技术总监，把DDD落地的那叫一个高级优雅！',},
                        { content:'注意，暂时不要升级 MacOS ，Flutter/RN 等构建 ipa 可能会因 「ITMS-90048」This bundle is invalid 被拒绝',},
                        { content:'牛逼！仅使用一行代码实现了全网站暗黑模式',}
                    ]
                    //封装函数
                    function setupnavRightText() {
                        const ul = document.querySelector('g-nav-right-text-list ul')
                        for (let i=0; i < navRightTextData.length; i++)
                        {
                            const li = document.createElement('li')
                            li.innerHTML = `
                                <a href="javascript:;">
                                    <div>
                                        <span class="g-nav-right-text-list-number">${i}</span><span class="g-nav-right-text-list-content">${navRightTextData[i].content}</span>
                                    </div>
                                </a>
                            `
                            ul.appendChild(li)
                        }
                    }
                    setupnavRightText()
                </script>

                <div class="g-nav-right-text-footer"><a href="javascript:;">查看更多></a></div>
            </div>
            <!-- 轮播图 -->
            <div class="g-nav-right-slide"></div>
            <!-- 作者榜 -->
            <div class="g-nav-right-author"></div>
            <!-- 推荐话题 -->
            <div class="g-nav-right-topic"></div>
            <!-- 底部 -->
            <div class="g-nav-right-footer"></div>

        </div>

    </div>
</body>

</html>